<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="16">
                <el-card class="box-card">
                    <el-tabs tab-position="left" style="width:98%">
                        <el-tab-pane :label="group.attrGroupName" v-for="(group,gidx) in dataResp.attrGroups" :key="group.attrGroupId">
                            <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spu.baseAttrs[0] = [{attrId:xx,val:}]-->
                            <el-form ref="form" :model="dataResp">
                                <el-form-item :label="attr.attrName" v-for="(attr,aidx) in group.attrs" :key="attr.attrId">
                                    <el-input v-model="dataResp.baseAttrs[gidx][aidx].attrId" type="hidden" v-show="false"></el-input>
                                    <el-select v-model="dataResp.baseAttrs[gidx][aidx].attrValues" :multiple="attr.valueType === 1" filterable allow-create default-first-option placeholder="请选择或输入值">
                                        <el-option v-for="(val,vidx) in attr.valueSelect.split(';')" :key="vidx" :label="val" :value="val"></el-option>
                                    </el-select>
                                    <el-checkbox v-model="dataResp.baseAttrs[gidx][aidx].showDesc" :true-label="1" :false-label="0">快速展示
                                    </el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div style="margin:auto">
                        <el-button type="success" style="float:right" @click="submitSpuAttrs">确认修改</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                spuId: "",
                catalogId: "",
                dataResp: {
                    //后台返回的所有数据
                    attrGroups: [],
                    baseAttrs: []
                },
                spuAttrsMap: {}
            };
        },
        computed: {},
        methods: {
            clearData() {
                this.dataResp.attrGroups = [];
                this.dataResp.baseAttrs = [];
                this.spuAttrsMap = {};
            },
            getSpuBaseAttrs() {
                this.$http({
                    url: this.$http.adornUrl(`/product/attr/base/listforspu/${this.spuId}`),
                    method: "get"
                }).then(({data}) => {
                    data.data.forEach(item => {
                        this.spuAttrsMap["" + item.attrId] = item;
                    });
                    console.log("~~~~", this.spuAttrsMap);
                });
            },
            getQueryParams() {
                this.spuId = this.$route.query.spuId;
                this.catalogId = this.$route.query.catalogId;
                console.log("----", this.spuId, this.catalogId);
            },
            showBaseAttrs() {
                let _this = this;
                this.$http({
                    url: this.$http.adornUrl(
                        `/product/attrgroup/${this.catalogId}/withattr`
                    ),
                    method: "get",
                    params: this.$http.adornParams({})
                }).then(({data}) => {
                    //先对表单的baseAttrs进行初始化
                    data.data.forEach(item => {
                        let attrArray = [];
                        item.attrs.forEach(attr => {
                            let v = "";
                            if (_this.spuAttrsMap["" + attr.attrId]) {
                                v = _this.spuAttrsMap["" + attr.attrId].attrValue.split(";");
                                if (v.length == 1) {
                                    v = v[0] + "";
                                }
                            }
                            attrArray.push({
                                attrId: attr.attrId,
                                attrName: attr.attrName,
                                attrValues: v,
                                showDesc: _this.spuAttrsMap["" + attr.attrId]
                                    ? _this.spuAttrsMap["" + attr.attrId].quickShow
                                    : attr.showDesc
                            });
                        });
                        this.dataResp.baseAttrs.push(attrArray);
                    });
                    this.dataResp.attrGroups = data.data;
                });
            },
            submitSpuAttrs() {
                console.log("·····", this.dataResp.baseAttrs);
                //spu_id  attr_id  attr_name             attr_value             attr_sort  quick_show
                let submitData = [];
                this.dataResp.baseAttrs.forEach(item => {
                    item.forEach(attr => {
                        let val = "";
                        if (attr.attrValues instanceof Array) {
                            val = attr.attrValues.join(";");
                        } else {
                            val = attr.attrValues;
                        }

                        if (val != "") {
                            submitData.push({
                                attrId: attr.attrId,
                                attrName: attr.attrName,
                                attrValue: val,
                                quickShow: attr.showDesc
                            });
                        }
                    });
                });

                this.$confirm("修改商品规格信息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$http({
                            url: this.$http.adornUrl(`/product/attr/update/${this.spuId}`),
                            method: "post",
                            data: this.$http.adornData(submitData, false)
                        }).then(({data}) => {
                            this.$message({
                                type: "success",
                                message: "属性修改成功!"
                            });
                        });
                    })
                    .catch((e) => {
                        this.$message({
                            type: "info",
                            message: "已取消修改" + e
                        });
                    });
            }
        },
        created() {
        },
        activated() {
            this.clearData();
            this.getQueryParams();
            if (this.spuId && this.catalogId) {
                this.showBaseAttrs();
                this.getSpuBaseAttrs();
            }
        }
    };
</script>
<style scoped>
</style>
